<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>UDS Pro</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="screen-orientation" content="portrait">
	<meta name="full-screen" content="yes">
	<meta name="browsermode" content="application">
	<meta name="x5-orientation" content="portrait">
	<meta name="x5-fullscreen" content="true">
	<meta name="x5-page-mode" content="app">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
	<!-- css -->
	<link rel="stylesheet" href="/zc/css/powerange.css" />
    <link href="/zc/css/mui.min.css" rel="stylesheet">
    <link href="/zc/css/footer.css" rel="stylesheet">
	<link href="/zc/css/base.css" rel="stylesheet">
    <!-- js -->
	<script src="/zc/js/jquery.min.js"></script>
    <script src="/zc/js/mui.min.js"></script>
	<script src="/zc/js/template.js"></script>
	<script src="/zc/js/flexible.js"></script>
	<script src="/zc/js/flexible_css.js"></script>
	<script src="/zc/js/foot_bar.js"></script>
	<script src="/zc/js/powerange.min.js"></script>
	<script src="/zc/js/layer.js"></script>
	<script>
		mui.init({
			gestureConfig:{
				swipe:true
			}
		})
	</script>
	<style>
		.usdt_mc{
			width: 100%;
			height: 1.253333rem;
			text-align: center;
			line-height: 1.253333rem;
			color: #fff;
			background: #18C78D;
			margin: 10px 0;
			font-size: .4rem;
			display: none;
			margin-top: .2rem;
		}
		.nav-content{
			font-size: 0.4rem;
			width: 100%;
			height: 100%;
			background: #fff;
		}
		.nav-content .title{
			padding-left: 4%;
			padding-right: 4%;
			height: 1.333333rem;
			display: flex;
			display: -webkit-flex;
			align-items: center;
			justify-content: space-between;
		}
		.nav-content .q_usdt1.active,.nav-content .q_usdt2.active{
			color: #e56337;
		}
		.mxx_block.active{
			background: rgb(247, 249, 255);
		}
		.range-handle {
			background: url(/zc/img/xyq.png) no-repeat;
			background-size:100% 100%;
		}
		.xjwt_block {padding-bottom: 50px;}
		.wt_block{
                padding:.533333rem .4rem;
                border-bottom: 1px solid #f1f1f1;
                	float: left;
                	width: 100%
               
            }
            .head_left{
            	float: left;
            }
            .head_right{
            	float: right;
            }
            .head .head_left .nsb1{
                    color: #e56337;
                    font-size: .453333rem;
                    font-weight: bold;
                    paddgin-right:.2rem;
                }
                .head .head_left .nsb2{
                    color: #00BD84;
                    font-size: .453333rem;
                    font-weight: bold;
                    paddgin-right:.2rem;
                }
                .head .head_left .ns2{
                    color: #000;
                    font-size: .453333rem;
                    font-weight: bold;
                }
                .head .head_left .ns3{
                    color: #A1A7B7;
                    font-size: .32rem;
                }
                .head .head_left .ns4{
                    color: #A1A7B7;
                    font-size: .32rem;
                }
                .head .head_right span{
                    color: #A1A7B7;
                    font-size: .373333rem;
                    font-weight: bold;
                    padding-right: .266667rem
                }
                .head .head_right img{
                    width: 0.2rem;
                    height: 0.3rem;
                }
                .content1>.ns1{
                    width: 35%;
                }
                .content1>.ns2{
                    width: 30%;
                }
                .content1>.ns3{
                    width: 35%;
                }
                .content1>.ns3>.ws1{
                    text-align: right;
                }
                .content2>.ns1{
                    width: 35%;
                }
                .content2>.ns2{
                    width: 30%;
                }
                .content2>.ns3{
                    width: 35%;
                }
                .content2>.ns3>.ws1{
                    text-align: right;
                }
                .content1{
                    margin-top: .533333rem;
                	float: left;
                	width: 100%

                }
                .content1 .ns1{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                }
                .content1 .ns1 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content1 .ns1 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content1 .ns2{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                   
                }
                .content1 .ns2 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content1 .ns2 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content1 .ns3{
                	float: left;
                    text-align: right;
                    margin-bottom: .266667rem;
                    
                }
                .content1 .ns3 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content1 .ns3 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                    text-align: right;
                }
                .content2{
                	float: left;
                     margin-top: .273333rem;
                	width: 100%
                    
                }
                .content2 .ns1{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                    
                }
                .content2 .ns1 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content2 .ns1 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content2 .ns2{
                	float: left;
                    text-align: left;
                    margin-bottom: .266667rem;
                    
                }
                .content2 .ns2 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content2 .ns2 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                }
                .content2 .ns3{
                	float: left;
                    text-align: right;
                    margin-bottom: .266667rem;
                    
                }
                .content2 .ns3 .ws1{
                    color: #B9BFD2;
                    font-size: .32rem;
                    font-weight: bold;
                    margin-bottom: .266667rem
                }
                .content2 .ns3 .ws2{
                    color: #A1A7B7;
                    font-size: .426667rem;
                    font-weight: bold;
                    text-align: right;
                }
				.usdt_mr{
					border-radius: .2rem;
				}
	</style>
</head>
<body>
	<div id="app">
		<!-- 头部 -->
		<div class="trading_head">
			<div class="left open_cbl">
				<img src="/zc/img/caidan.png" alt="">
				<span class="content"></span>
			</div>
			<!-- <div class="right">
				<img class="ns1" src="/zc/img/dtt.png" alt="">
			</div> -->
		</div>
		<!-- 内容 -->
		<div class="trading_content">
			<div class="mrmc">
				<div class="left">
					<div class="ns1">
						<div class="mr_btn active">买入</div>
						<div class="mc_btn">卖出</div>
					</div>
					<div class="num_add" style="margin-top:.4rem;">
						<div class="jian_cny">-</div>
						<div>|</div>
						<div class="sl">
						<input type="hidden" class="buyprice" value="">
						<input type="hidden" class="sellprice" value="">
						<input class="g_price" style="padding-left:.2rem" type="number" placeholder="价格">
						</div>
						<div>|</div>
						<div class="add_cny">+</div>
					</div>
					<p class="cny">≈$20.17</p>
					<div class="num_add1">
						<div class="jian_cny1">-</div>
						<div>|</div>
						<div class="sl1"><input class="g_number" style="padding-left:.2rem" type="number" placeholder="数量"></div>
						<div>|</div>
						<div class="add_cny1">+</div>
					</div>
					<div style="color:#10131e;text-align:left;margin-top:.32rem;"><span style="color:#7e87a2;font-size:16px">可用&nbsp;&nbsp;</span><span style="font-size:bold;font-size:20px" class="canuse"></span> <span style="font-size:16px" class="title"></span> </div>
					<input type="text" class="js-min-max-start" style="display: none;">
					<div style="color:#10131e;text-align:left;margin-top:1rem;"><span style="color:#7e87a2;font-size:16px">交易额&nbsp;&nbsp;</span><span style="font-size:bold;font-size:20px" class="count"> </span><span style="font-size:16px" >USDT</span> </div>
					<div class="usdt_mr buysend">买入 <span class="title"></span></div>
					<div class="usdt_mc sellsend">卖出<span class="title"></span></div>
					
				</div>
				<div class="right">
					<div class="ns1">
						<span>价格</span>
						<span class="r_text" style="text-align: right">数量</span>
					</div>
					<div class="jg_list buybox">
						
					</div>
					<div class="us_ze" style="text-align:left">
						<span class="mini"></span>
					</div>
					<div style="color:#999999;font-size: 14px;margin: .04rem 0 .1rem;text-align:left" class="tocny"></div>
					<div class="jg_list sellbox">
						
					</div>
				</div>
			</div>
		</div>
		 <div style="height:.133333rem;background: #E6E6E6"></div>
		 <!-- 下面 -->
		 <div class="trading_content">
			 <div class="wt_head">
				 <span>当前委托</span>
				 <div>
					 <img src="/zc/img/cjjl.png" alt="">
					 <span>成交记录</span>
				 </div>
			 </div>
		 </div>
		 <div style="height:.08rem;background: #E6E6E6"></div>
		 <!-- 结束 -->
		 <div class="xjwt_block record">
			
		 </div>
		 <div style="height: 1.66667rem; float: left; width: 100%"></div>
         <!-- 底部导航 -->
		<div class="foot_bar">
			<div class="foot_block">
				<img class="ws1" src="/zc/img/a_icon1.png" alt="">
				<p>首页</p>
			</div>
			<div class="foot_block">
				<img class="ws2" src="/zc/img/a_icon2.png" alt="">
				<p>OTC</p>
			</div>
			<div class="foot_block active">
				<img class="ws3" src="/zc/img/b_icon3.png" alt="">
				<p>交易</p>
			</div>
			<div class="foot_block">
				<img class="ws4" src="/zc/img/a_icon4.png" alt="">
				<p>资产</p>
			</div>
			<div class="foot_block">
				<img class="ws5" src="/zc/img/a_icon5.png" alt="">
				<p>我的</p>
			</div>            
		</div>
		<!-- 币种切换 -->
	<div class="nav-bg"></div>
			<div class="nav-box">
				<div class="nav-content">
					<div class="title">
						<div class="left q_usdt1 active">USDT</div>
						<div class="right">
							<span class="q_usdt2">自选</span>
						</div>
					</div>
					<div class="mxx_list">
						
					</div>
			    </div>
			</div>
</div>
	
</body>
</html>
	

<script type="text/html" id="left_box">
	{{each info v }}
    <a href="trading?title={{v.title}}&content={{v.content}}&types={{v.types}}">
		<div class="mxx_block" data-title={{v.title}}>
			<div>{{v.title}}</div>
			<div>{{v.last}}</div>
			<div style="color:#10131e;font-size:13px">{{v.percentChange}}%</div>
		</div>
    	
    </a>
    {{/each}}
</script>

<script type="text/html" id="buy_box">
	{{each info as v index}}
    	<div class="ws1">
	        <span class="sl">{{index+1}}</span>
			<span class="jg">{{v.price}}</span>
			<span class="r_text sl">{{v.allnumber}}</span>
		</div>
    {{/each}}
</script>


<script type="text/html" id="sell_box">
	{{each info as v index}}
    	<div class="ws1">
	        <span class="sl">{{index+1}}</span>
			<span class="jg">{{v.price}}</span>
			<span class="r_text sl">{{v.allnumber}}</span>
		</div>
    {{/each}}
</script>

<script type="text/html" id="have_record">
	{{each info as v index}}
	
	<div class="wt_block"  >
          
              <div class="head">
                  <div class="head_left">
                  	<%if (v.type == 1){%>
                    <span class="nsb1">买入</span>
                    <%}else{%>
                    <span class="nsb2">卖出</span>
                    <%}%>

                    &nbsp;<span class="ns2 content"></span>&nbsp;
                    <span class="ns3">{{v.createtime}}</span>&nbsp;
                  </div>
                  <div class="head_right">
                  	<%if (v.status == 1 && v.sum == 0){%>
                      <span>未成交</span>
                  	<%}else if (v.status == 1 && v.sum > 0){%>
                      <span>部分成交</span>
                  	<%}else if (v.status == 2) {%>
                      <span>完全成交</span>
                    <%}%>  
                      <img src="/zc/img/yjt_h.png" alt="">
                  </div>
              </div>
              <div class="content1">
                  <div class="ns1">
                      <p class="ws1">委托价格({{v.ltype}})</p>
                      <p class="ws2">{{v.price}}</p>
                  </div>
                  <div class="ns2">
                      <p class="ws1">委托数量({{v.rtype}})</p>
                      <p class="ws2">{{v.allnumber}}</p>
                  </div>
                  <div class="ns3">
                      <p class="ws1">成交额({{v.ltype}})</p>
                      <p class="ws2">{{v.sum}}</p>
                  </div>
              </div>
              <div class="content2">
                  <div class="ns1">
                      <p class="ws1">成交均价({{v.ltype}})</p>
                      <p class="ws2">{{v.avgprice}}</p>
                  </div>
                  <div class="ns2">
                      <p class="ws1">成交数量({{v.rtype}})</p>
                      <p class="ws2">{{v.thennumber}}</p>
                  </div>
                  <div class="ns3">
                      <p class="ws1">成交笔数</p>
                      <p class="ws2">{{v.count}}</p>
                  </div>
              </div>
          </div>
    	
    {{/each}}
</script>
<script type="text/html" id="no_record">
	<div style="padding-top: 50px;padding-bottom: 50px">
	<img src="/zc/img/zwsj1.png" alt="">
	<p style="text-align: center">暂无数据</p>
	<div class="t_djsx" onclick="javascript:location.reload();">点击刷新</div>
	</div>
</script>

<script type="text/javascript">
	$(function(){ 
		
		var title = getUrlParam('title');
		if(!title){
			var title = 'USDT';
			$('.title').html('USDT');
			$('.mxx_block').eq(0).addClass('active');
		}else{
			$('.title').html(title);

		}

		var content = getUrlParam('content');

		var types = getUrlParam('types');

		if(!types){

			var types = '1/2';

		}

		function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
		function getcoin(content){

            $.ajax({
                type: "POST",
                data: {},
                dataType: "jsonp",
                url: "/index/buy/getcoin",
                success: function (res) {
                    if(res.code==0){
                        
                    	$('.mxx_list').append(template("left_box", res));
                    	for(var i=0;i<res.info.length;i++){
                    		if(title==$('.mxx_block').eq(i).data('title')){
                    			$('.mxx_block').removeClass('active');
                    			$('.mxx_block').eq(i).addClass('active');
                    		}
                    	}
                    	
                    	// console.log(content)
                    	if(!content){

                    		$('.content').html(res.info[0].content);

                    	}else{

                    		$('.content').html(content);

                    	}

                    }
                }
            });
        }

        function getbuyDate(){
            $.ajax({
                type: "POST",
                data: {fieldtype:types,type:1},
                dataType: "jsonp",
                url: "/index/buy/newestPriceNumber",
                success: function (res) {
                    if(res.code==0){

                        $('.buybox').append(template("buy_box", res));
                        $('.g_price').val(res.info[0].price);
                        $('.buyprice').val(res.info[0].price);

                        $.ajax({
			                type: "POST",
			                data: {},
			                dataType: "jsonp",
			                url: "/index/apihq/usdt_cny",
			                success: function (ress) {
			                    if(ress.code==0){
			                        $('.mini').html(ress.val);
			                        $('.tocny').html('≈$'+ress.val*res.mini);
			                        
			                    }else{
			                        //$('.otc_order1').html(template("tpl1", res));
			                    }
			                }
			            });
                    }else{
                        //$('.otc_order1').html(template("tpl1", res));
                    }
                }
            });
        }
        function getsellDate(){
            $.ajax({
                type: "POST",
                data: {fieldtype:types,type:2},
                dataType: "jsonp",
                url: "/index/buy/newestPriceNumber",
                success: function (res) {
                    if(res.code==0){

                        $('.sellprice').val(res.info[0].price);
                        $('.sellbox').append(template("sell_box", res));
                    }
                }
            });
        }
        function getbalanceDate(types){

        	var ftype = types.split('/')[0];

            $.ajax({
                type: "POST",
                data: {btype:2,ftype:ftype},
                dataType: "jsonp",
                url: "/index/asset/crubalance",
                success: function (res) {
                    if(res.code==0){

                    	if(res.info){
							var aaa=parseFloat(res.info).toFixed(4)
                    		$('.canuse').html(aaa);
                    	}else{
                    		$('.canuse').html(0);
                    	}
                        
                    }
                }
            });
        }
		var status = true;
		var page = 1;
        var limit = 10;
        function getDate(){
            $.ajax({
                type: "POST",
                data: {page:page,limit:limit},
                dataType: "jsonp",
                url: "/index/buy/currentorder",
                success: function (res) {
                    if(res.code==0){
                        	$('.record').append(template("have_record",res));
							if(!res.info || res.info.length<limit){
                                status = false;
                            }
                        
                    }else{
                        $('.record').html(template("no_record"));
                    }
                }
            });
        }
		 // 下拉加载
		 $(window).off("scroll").on("scroll", function(e){
                var totalheight = parseFloat($(this).height()) + parseFloat($(this).scrollTop());
                if (($(document).height()<=totalheight && status)){
                    status = true;
                    page++;
                    getDate();
                }
            });
        getcoin(content);
        getbuyDate(types);
        getsellDate(types);
        getbalanceDate(types);
        getDate();


		var elem = document.querySelector('.js-min-max-start');//选择input元素
		var init = new Powerange(elem, { min: 0, max: 5, start: 0 });//实例化powerange类并且初始化参数
		$('.range-max').html('0.05')
		//拖动
		elem.onchange = function() {
			console.log(elem.value)
			if(elem.value==1){
				
				$('.g_number').val('0.01');
			}
			if(elem.value==2){
				$('.g_number').val('0.02');
			}
			if(elem.value==3){
				$('.g_number').val('0.03');
			}
			if(elem.value==4){
				$('.g_number').val('0.04');
			}
			if(elem.value==5){
				$('.g_number').val('0.05');
			}
		};
		//模板插值
		// $.ajax({
		// 	type: "post",
		// 	url: "url",
		// 	data: "data",
		// 	dataType: "jsonp",
		// 	success: function (res) {
		// 		if(res.code==0){
		// 			$('.index_body').html(template("tpl-info", res));
		// 		}else{

		// 		}
		// 	}
		// });

		$('.q_usdt1').click(function (e) { 
			$(this).addClass('active');
			$('.q_usdt2').removeClass('active');
		});
		$('.q_usdt2').click(function (e) { 
			$(this).addClass('active');
			$('.q_usdt1').removeClass('active');
		});
		$('.jian_cny').click(function (e) { 
			var price1=$('.g_price').val();
			var number=$('.g_number').val();
			if(price1==''||price1<=0){
               return false;
          }else{
			 var price11=(parseFloat(price1)-0.0001).toFixed(4);
			 $('.g_price').val(price11);
			 $('.count').html((number * price11).toFixed(4));
          } 
		});
		$('.add_cny').click(function (e) { 
			var price2=$('.g_price').val();
			var number=$('.g_number').val();
			if(price2==''||price2<=0){
				$('.g_price').val('0.0001');
          }else{
			 var price22=(parseFloat(price2)+0.0001).toFixed(4);
			 $('.g_price').val(price22);
			 $('.count').html((number * price22).toFixed(4));
          } 
		});
		$('.jian_cny1').click(function (e) { 
			var number1=$('.g_number').val();
			var price=$('.g_price').val();
			if(number1==''||number1<=0){
               return false;
          }else{
			 var number11=(parseFloat(number1)-0.01).toFixed(2);
			 $('.g_number').val(number11);
			 $('.count').html((number11 * price).toFixed(4));
          } 
		});
		$('.add_cny1').click(function (e) { 
			var number2=$('.g_number').val();
			var price=$('.g_price').val();
			if(number2==''||number2<=0){
				$('.g_number').val('0.01');
          }else{
			 var number22=(parseFloat(number2)+0.01).toFixed(2);
			 $('.g_number').val(number22);
			 $('.count').html((number22 * price).toFixed(4));
          } 
		});
		$('.mr_btn').click(function (e) { 
			$('.usdt_mr').show();
			$('.usdt_mc').hide();
			$(this).addClass('active');
			$('.mc_btn').removeClass('active');
			var price = $('.buyprice').val();
			console.log(price)
			$('.g_price').val(price);
		});
		$('.mc_btn').click(function (e) { 
			$('.usdt_mc').show();
			$('.usdt_mr').hide();
			$(this).addClass('active');
			$('.mr_btn').removeClass('active');
			var price = $('.sellprice').val();
			console.log(price)
			$('.g_price').val(price);
		});
		$('.open_cbl').click(function (e) { 
			 $('.nav-bg').show();
			 setTimeout(function(){
				$('.nav-box').css('left','0');
			 },20)
		 });
		 $('.nav-bg').click(function (e) { 
			$('.nav-bg').hide();
			 setTimeout(function(){
				$('.nav-box').css('left','-80%');
			 },20)
		 });

		  $('.buysend').click(function (e) { 

		  	var number = $('.g_number').val();
		  	var price = $('.g_price').val();

		  	if(!number || number == ''){
		  		layer.open({
								content: '请输入数量',
								skin: 'msg',
								time: 2
                            }); 
		  		return;
		  	}

		  	if(!price || price == ''){
		  		layer.open({
								content: '请输入价格',
								skin: 'msg',
								time: 2
                            }); 
		  		return;
		  	}



		  	$.ajax({
                type: "POST",
                data: {type:1,number:number,price:price,fieldtypes:types},
                dataType: "jsonp",
                url: "/index/buy/pushBuy",
                success: function (res) {
                    
                        
                    	layer.open({
								content: res.msg,
								skin: 'msg',
								time: 2
                            }); 
                    
                }
            });

		  })

		  $('.sellsend').click(function (e) { 

		  	var number = $('.g_number').val();
		  	var price = $('.g_price').val();

		  	if(!number || number == ''){
		  		layer.open({
								content: '请输入数量',
								skin: 'msg',
								time: 2
                            }); 
		  		return;
		  	}

		  	if(!price || price == ''){
		  		layer.open({
								content: '请输入价格',
								skin: 'msg',
								time: 2
                            }); 
		  		return;
		  	}

		  	$.ajax({
                type: "POST",
                data: {type:2,number:number,price:price,fieldtypes:types},
                dataType: "jsonp",
                url: "/index/buy/pushBuy",
                success: function (res) {
                    
                        
                    	layer.open({
								content: res.msg,
								skin: 'msg',
								time: 2
                            }); 
                    
                }
            });

		  })


	})
</script>
